<template>
    <div>
        <h2>康复理疗列表</h2>
        <a href='/IndxView'>新增</a><br>
        项目名称<input type="text" v-model="qag.name">    
        <input type="button" value="查询" @click="Show">
        <input type="button" value="批量启用/禁用" @click="Qunt">
        <a href="https://localhost:7172/api/Sent/Chenkinfor">康复理疗信息的导出</a>
        <table>
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" v-model="selet" @change="seletall">
                    </td>
                    <td>项目名称</td>
                    <td>项目编号</td>
                    <td>佣金(元)</td>
                    <td>人数</td>
                    <td>时长(小时)</td>
                    <td>是否启用</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>
                        <input type="checkbox" v-model="idlist" :value="m.id">
                    </td>
                    <td>{{ m. name}}</td>
                    <td>{{ m. benid}}</td>
                    <td>{{ m. jint}}</td>
                    <td>{{ m. num}}</td>
                    <td>{{ m. chen}}</td>
                    <td>{{ m. ismat?"启用":"禁用"}}</td>
                    <td><input type="button" value="逻辑删除" @click="Del(m.id)"></td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="Fent(1)">
        <input type="button" value="上一页" @click="Fent(2)">
        <input type="button" value="下一页" @click="Fent(3)">
        <input type="button" value="尾页" @click="Fent(4)">
        一共{{ page.pcount }}页，一共{{ page.count }}条，每页{{ qag.parsize }}条，当前的{{ qag.pardex }}页
        <select v-model="qag.parsize" @change="setsize">
            <option>2</option>
            <option>4</option>
            <option>6</option>
        </select>
        <input type="text" v-model="qag.pardex">
        <input type="button" value="跳转" @click="setdex">
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';

const idlist=ref([0])

const selet=ref(false)

const Qunt=()=>{
    var ids=idlist.value.toString();
    axios.get("https://localhost:7172/api/Sent/UpdateRang",{params:{idstr:ids}}).then(res=>{
        if(res.data>0){
            alert('批量启用/禁用成功')
            Show()
        }
    })

}

const seletall=()=>{
    if(selet.value){
        for(var i=0;i<data.value.length;i++){
            idlist.value.push(data.value[i].id);
        }
    }
    else{
        idlist.value=[0]
    }
}

onMounted(() => {
    Show()  
})

const Del=(vid:any)=>{
    if(!confirm('确认逻辑删除吗?')){
        return;
    }
    axios.delete("https://localhost:7172/api/Sent/Delete",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert('逻辑删除成功')
            Show()
        }
    })
}

const data=ref([{
  "id": 0,
  "name": "",
  "benid": "",
  "jint": 0,
  "num": 0,
  "chen": 0,
  "ismat": true
}])

const setdex=()=>{
    if(qag.value.pardex>=1&&qag.value.pardex<=page.value.pcount){
        Show()
    }
}

const setsize=()=>{
     qag.value.pardex=1;
     Show()
}

const Fent=(val:any)=>{
    if(val==1){
        qag.value.pardex=1;
        Show();
    }
    if(val==2){
        if(qag.value.pardex>1){
            qag.value.pardex-=1;
            Show();
        }   
    }
    if(val==3){
        if(qag.value.pardex<page.value.pcount){
            qag.value.pardex+=1;
            Show();
        }
    }
    if(val==4){
        qag.value.pardex=page.value.pcount;
        Show();
    }
}

const qag=ref({
    pardex:1,
    parsize:2,
    name:"",
})

const page=ref({
    count:0,
    pcount:0
})

const Show=()=>{
    axios.get("https://localhost:7172/api/Sent/Show",{params:qag.value}).then(res=>{
        data.value=res.data.data;
        page.value.count=res.data.count;
        page.value.pcount=Math.ceil(page.value.count/qag.value.parsize);
    })
}

</script>

<style scoped>

</style>